<template>
  <!-- 区域 -->
  <div>
    <div class="app-page">
      <org-tree
        title="组织机构"
        :tree-data="treeData01"
        :mouse-button="false"
        :loading="$loadingPlugin.getTreeData"
        class="content"
        @currentChange="currentChange01"
      />
      <goods-tree
        title="商品分类"
        :tree-data="treeData02"
        :loading="$loadingPlugin.getTreeData"
        :mouse-button="false"
        class="content"
        @currentChange="currentChange02"
      />
      <lb-table
        ref="lbTable"
        v-el-height-adaptive-table="{bottomOffset:10}"
        class="table"
        border
        highlight-current-row
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :pagination="false"
        :immediate-fetch="false"
        @fetch="fetchData"
      />

      <distributionDialog ref="distributionDialog" />
      <setServiceDialog ref="setServiceDialog" />
      <setFloorDialog ref="setFloorDialog" @fetch="fetchData" />
      <setLeaseDialog ref="setLeaseDialog" />
      <deleteRelevantDialog ref="deleteRelevantDialog" />
    </div>
  </div>
</template>

<script>
  import {
    goodsTypeQueryAllList,
    organizationQueryList,
    queryGoodsListPriceSetting
  } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import OrgTree from '@/views/components/OrgTree'
  import GoodsTree from '@/views/components/GoodsTypeTree'
  import distributionDialog from './components/DistributionDialog.vue'
  import setFloorDialog from './components/SetFloorDialog.vue'
  import setLeaseDialog from './components/SetLeaseDialog.vue'
  import setServiceDialog from './components/SetServiceDialog.vue'
  import deleteRelevantDialog from './components/DeleteRelevantDialog.vue'

  export default {
    name: 'goodsCostSetting',
    components: {
      OrgTree,
      GoodsTree,
      distributionDialog,
      setFloorDialog,
      setLeaseDialog,
      setServiceDialog,
      deleteRelevantDialog
    },
    data() {
      return {
        indexId: 0,
        treeData01: [],
        treeData02: [],
        currentOrg: null,
        currentGoodsType: null,
        selectLine: null,
        tableData: {
          total: 0,
          column: [
            {
              prop: 'flag',
              align: 'left',
              label: '已报价',
              width: 130,
              render: (h, { row }) => {
                const msg = []
                if (row.flag) {
                  msg.push({ image: require('@/assets/psf.png') })
                }
                if (row.flag2) {
                  msg.push({ image: require('@/assets/lcf.png') })
                }
                if (row.flag1) {
                  msg.push({ image: require('@/assets/fwf.png') })
                }
                if (row.flag3) {
                  msg.push({ image: require('@/assets/zpf.png') })
                }
                return msg.map(l => {
                  return <img style='margin-right:6px' src={l.image} alt=''/>
                })
              }
            },
            {
              prop: 'goodsCode',
              width: 80,
              label: '编码'
            },
            {
              prop: 'goodsName',
              label: '名称'
            },
            {
              prop: 'gtName',
              width: 100,
              label: '类型'
            },
            {
              prop: 'unitName',
              width: 50,
              align: 'center',
              label: '单位'
            },
            {
              prop: 'remark',
              label: '描述'
            },
            {
              label: '操作',
              width: 320,
              render: (h, { row, $index }) => {
                return (
                <div>
                  <el-link v-permission={1} size='mini' underline={false} onClick={() => this.setDistribution(row)}>
                    远距配送费
                  </el-link>
                  <el-link v-permission={2} size='mini' underline={false} onClick={() => this.setFloor(row, 'current')}>
                    楼层费
                  </el-link>
                  <el-link v-permission={3} size='mini' underline={false} onClick={() => this.setService(row)}>
                    服务费
                  </el-link>
                  <el-link v-permission={4} size='mini' underline={false} onClick={() => this.setLease(row, 'current')}>
                    租赁费
                  </el-link>
                  <el-link v-permission={5} size='mini' underline={false} type='danger' onClick={() => this.deleteRelevant(row, 'current')}>
                    删除费用
                  </el-link>
                </div>)
              }
            }
          ],
          data: []
        }
      }
    },
    created() {
      this.getTreeData01()
      this.getTreeData02()
    },
    methods: {
      // 列表查询
      async fetchData() {
        if (!this.currentGoodsType) return
        const res = await queryGoodsListPriceSetting({
          gtId: this.currentGoodsType.gtId || undefined,
          orgId: this.currentOrg.orgId
        })
        this.tableData.data = res.data
      },
      // 获取组织机构数据
      async getTreeData01() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData01 = getTreeData(data)
      },
      // 选择组织机构变化
      currentChange01(current) {
        this.currentOrg = current
        if (this.currentOrg) this.$refs.lbTable.fetch()
      },
      // 获取树图数据
      async getTreeData02() {
        const res = await goodsTypeQueryAllList({})
        const data = res.data.map(item => ({
          label: item.gtName,
          ...item
        }))
        this.treeData02 = getTreeData(data)
      },
      // 选择变化
      currentChange02(current) {
        this.currentGoodsType = current
        this.selectLine = null
        if (this.currentOrg) this.$refs.lbTable.fetch()
      },
      async setDistribution(row) {
        await this.$refs.distributionDialog.open(row, this.currentOrg)
        this.$refs.lbTable.fetch()
      },
      async setFloor(row) {
        await this.$refs.setFloorDialog.open(row, this.currentOrg)
        this.$refs.lbTable.fetch()
      },
      async setService(row) {
        await this.$refs.setServiceDialog.open(row, this.currentOrg)
        this.$refs.lbTable.fetch()
      },
      async setLease(row) {
        await this.$refs.setLeaseDialog.open(row, this.currentOrg)
        this.$refs.lbTable.fetch()
      },
      async deleteRelevant(row) {
        await this.$refs.deleteRelevantDialog.open(row, this.currentOrg)
        this.$refs.lbTable.fetch()
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  display: flex;
  width: 100%;
  height: calc(100vh - 130px);
  padding: 0;
  // .content {
  //   max-width: 280px;
  //   padding: 0 10px 0 10px;
  //   flex: 1;
  // }
  .table {
    width: 100%;
    margin-left: 10px;
  }
}

</style>
